<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 转账记录列表</title>
    <link rel="shortcut icon" href="../../content/static/img/favicon.ico">
    <link href="../../content/css/common_modal.css" rel="stylesheet">
    <link href="../../content/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../../content/js/lib/vue/select2.min.css" rel="stylesheet">
    <link href="../../content/static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="../../content/static/css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="../../content/js/lib/calendar/calendar.css" rel="stylesheet">
    <link href="../../content/js/lib/calendar/scrollbar.css" rel="stylesheet">
    <link href="../../content/static/css/style.min.css?v=4.0.0" rel="stylesheet">
    <style>
        .fa-female:before {
            color: #fb7cd5;
        }
        .fa-location-arrow:before {
            color: rebeccapurple;
        }
        .fa-mobile-phone:before, .fa-mobile:before{
            color: black;
        }
        .fa-map-marker:before {
            color: #1ab394;
        }
        table-th{
            font-size: 12px;
            font-family: tahoma, "Microsoft YaHei", "Hiragino Sans GB", Arial, sans-serif;
            line-height: 1.42857143;
            color: #333;
            background-color: #f5f5f5;
        }
        table tr{ height:40px;}
        .bill-tips>li{
            margin-top: 20px;
        }
    </style>
</head>

<body class="content-container">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <ol class="breadcrumb">
                        <li><a>收支</a></li>
                        <li><a>转账记录</a></li>
                    </ol>
                </div>
                <div class="content-wrapper">
                    <div class="search-condition">
                        <div>
                            <div class="filter-wrapper">
                                <ul class="clearfix">
                                    <li class="filter-item ">
                                        <label>转账日期</label>
                                        <div>
                                            <div class="fill-wrapper fill-wrapper-auto">
                                                <input id="costTimeStart" type="text" class="fill-item timeChoose  revision-time"
                                                    readonly="readonly">
                                            </div>
                                            <div class="fill-desc">到</div>
                                            <div class="fill-wrapper fill-wrapper-auto">
                                                <input id="costTimeEnd" type="text" class="fill-item timeChoose  revision-time"
                                                    readonly="readonly">
                                            </div>
                                        </div>
                                    </li>
                                    <li class="filter-item ">
                                        <label>转账人</label>
                                        <div>
                                            <div class="fill-wrapper">
                                                <input id="serialNumber" type="text" class="fill-item">
                                            </div>
                                        </div>
                                    </li>
                                    <li class="filter-item ">
                                        <label>转账类型</label>
                                        <div>
                                            <select id="comeType" v-select2 class="fill-wrapper">
                                                <option value='0'>全部</option>
                                                <option value='1'>收入</option>
                                                <option value='2'>支出</option>
                                            </select>
                                        </div>
                                    </li>
                                    <li class="filter-item">
                                        <a class="revision-btn revision-btn-search">搜索</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12" style="padding: 12px 0px 12px 0px;">
                        <div class="alert alert-info" style="margin-bottom: 0px">
                            <a class="revision-btn" v-on:click="addShow()">新增转账(内部转账记录)</a>&nbsp;&nbsp;
                            <span>总条数：<span>12 条</span></span>
                        </div>
                    </div>
                    <table class="table table-hover table-bordered">
                        <thead style="background: #f5f5f5;">
                            <tr>
                                <th>序号</th>
                                <th>转出账户</th>
                                <th>转账日期</th>
                                <th>转入账户</th>
                                <th>金额(元)</th>
                                <th>转账人</th>
                                <th>备注</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>建设银行</td>
                                <td>2018-12-20</td>
                                <td>农业银行</td>
                                <td class="amount">100,000,0.00</td>
                                <td>财务</td>
                                <td>201812月份工资</td>
                                <td>
                                    <a href="javascript:;" v-on:click="detailShow(1)">详情</a>
                                    <a href="javascript:;" v-on:click="delete(3)">删除</a>
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>农业银行</td>
                                <td>2018-12-25</td>
                                <td>工商银行</td>
                                <td class="amount">67,000,0.00</td>
                                <td>财务</td>
                                <td>201812月份工资</td>
                                <td>
                                    <a href="javascript:;" v-on:click="detailShow(1)">详情</a>
                                    <a href="javascript:;" v-on:click="delete(3)">删除</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div style="display: none;" v-show="pageInit">
                <!-- 新增转账-->
                <modal v-bind:show.sync="addModal.show" v-bind:style="addModal .style" v-bind:add-class="addModal.addClass">
                    <h4 slot="header">新增转账</h4>
                    <div slot="body" class="clearfix">
                        <form class="form-horizontal m-t" novalidate="novalidate">
                            <div>
                                <h3 class="panel-title">转入</h3>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">转入账户</label>
                                <div class="col-sm-4">
                                    <select id="accountin">
                                        <option v-for="item in accountList" v-bind:value="item.Value" v-bind:selected="$index===0"
                                            v-text="item.Text"></option>
                                    </select>
                                </div>
                                <label class="col-sm-2 control-label">日期</label>
                                <div class="col-sm-4">
                                    <input id="comein" type="text" class="fill-item timeChoose  revision-time" readonly="readonly">
                                </div>
                            </div>
                            <div>
                                <h3 class="panel-title">转出</h3>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">转出账户</label>
                                <div class="col-sm-4">
                                    <select id="accountout">
                                        <option v-for="item in accountList" v-bind:value="item.Value" v-bind:selected="$index===0"  v-text="item.Text"></option>
                                    </select>
                                </div>
                                <label class="col-sm-2 control-label">日期</label>
                                <div class="col-sm-4">
                                    <input id="comeout" type="text" class="fill-item timeChoose  revision-time" readonly="readonly">
                                </div>
                            </div>
                            <div>
                                <h3 class="panel-title">其他信息</h3>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">金额</label>
                                <div class="col-sm-4">
                                    <input type="text" class="fill-item">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">转账人</label>
                                <div class="col-sm-4">
                                    <input type="text" class="fill-item" readonly value="当前登陆人">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">备注</label>
                                <div class="col-sm-8">
                                        <textarea id="ccomment" name="comment" class="form-control" style="height: 56px;"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </modal>
                <!-- 转账详情  -->
                <modal v-bind:show.sync="detailModal.show" v-bind:style="detailModal .style" v-bind:add-class="detailModal.addClass">
                    <h4 slot="header">转账详情</h4>
                    <div slot="body" class="clearfix">
                        <div class="approve-detail-modal-title">
                            <h2 style="margin-top: 0px;">日常收支详情</h2>
                        </div>
                        <ul class="bill-tips clearfix">
                            <li class="w-100">
                                <em>转出账户</em>
                                <span>建设银行</span>
                            </li>
                            <li class="w-100">
                                <em>转出日期</em>
                                <span>2018-12-29</span>
                            </li>
                            <li class="w-100">
                                <em>转入账户</em>
                                <span>农业银行</span>
                            </li>
                            <li class="w-100">
                                <em>转入日期</em>
                                <span>2018-12-29</span>
                            </li>
                            <li class="w-100">
                                <em>手续费(元)</em>
                                <span class="amount">10.00</span>
                            </li>
                            <li class="w-100">
                                <em>金额(元)</em>
                                <span class="amount">100,000,0.00</span>
                            </li>
                            <li class="w-100">
                                <em>备注</em>
                                <span>建设银行</span>
                            </li>
                        </ul>
                        <div class="approve-detail-modal-title" style="padding: 20px"></div>
                        <ul class="bill-tips clearfix" style="margin-top: -15px;">
                            <li style="width: 145px;">
                                <em style="width: 50px;">制单时间</em>
                                <span>2018-12-22</span>
                            </li>
                            <li>
                                <em style="width: 36px;">制单人</em>
                                <span>王老板</span>
                            </li>
                        </ul>
                    </div>
                </modal>
            </div>
        </div>
    </div>
    <script src="../../content/js/lib/vue/vue.min.js"></script>
    <script src="../../content/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="../../content/static/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="../../content/static/js/plugins/chosen/chosen.jquery.js"></script>
    <script src="../../content/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../../content/static/js/content.min.js?v=1.0.0"></script>
    <script src="../../content/js/lib/calendar/calendar.js"></script>
    <script src="../../content/js/lib/calendar/scrollbar.js"></script>
    <script src="../../content/js/lib/vue/vue-modal.js"></script>
    <script src="../../content/js/lib/vue/vue-pagination.js"></script>
    <script src="../../content/js/common.js"></script>
    <script src="../../content/js/lib/vue/select2.js"></script>
    <script type="text/javascript">
        $(function () {
            //时间验证
            var calObj = new $.Calendar({
                //time: true,
                skin: 'white'
            });
            $('#costTimeStart').focus(function () {
                var $this = $(this),
                    val = $this.val(),
                    endTime = $('#costTimeEnd').val();
                calObj.pick({
                    elem: this,
                    endDate: endTime
                });
            });
            $('#costTimeEnd').focus(function () {
                var $this = $(this),
                    val = $this.val(),
                    startTime = $('#costTimeStart').val();
                calObj.pick({
                    elem: this,
                    startDate: startTime
                });
            });
        });
        $("#accounts").select2({
            width: "220px"
        });
        $("#comeType").select2({
            width: "220px"
        });
        $("#status").select2({
            width: "220px"
        });
        $("#approveStatus").select2({
            width: "220px"
        });
        var vmData = {
            detailModal: {
                show: false,
                style: {
                    width: '480px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.detailModal.show = false;
                }
            },
            addModal: {
                show: false,
                style: {
                    width: '680px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.addModal.show = false;
                }
            },
            selectProductItem: [],
            accountList: [{
                "Text": "中国银行",
                "Value": "1",
            }, {
                "Text": "建设银行",
                "Value": "2",
            }, {
                "Text": "农业银行",
                "Value": "3",
            }, {
                "Text": "工商银行",
                "Value": "4",
            }, {
                "Text": "现金",
                "Value": "5",
            }, ],
        };
        vmData = $.extend(vmData, baseData);
        var vmMothod = {
            init: function () {},
            detailShow: function () {
                vm.detailModal.show = true;
            },
            addShow: function () {
                vm.addModal.show = true;
                $("#accountin").select2({
                    width: "187px"
                });
                $("#accountin").val('').trigger('change'); //初始化
                $("#accountout").select2({
                    width: "187px"
                });
                $("#accountout").val('').trigger('change'); //初始化

                var calObj_add = new $.Calendar({
                //time: true,
                skin: 'white'
                });
                $('#comein').focus(function () {
                    var $this = $(this),
                        val = $this.val(),
                        endTime =new Date();
                        calObj_add.pick({
                        elem: this,
                        endDate: endTime
                    });
                });
                $('#comeout').focus(function () {
                    var $this = $(this),
                    val = $this.val(),
                        endTime =new Date();
                        calObj_add.pick({
                        elem: this,
                        endDate: endTime
                    });
                });
            },
        };
        vmMothod = $.extend(vmMothod, baseCommonFunction);
        var vm = new Vue({
            el: '.content-container',
            data: vmData,
            methods: vmMothod
        });
        vm.init();
    </script>
</body>

</html>